<style scoped>
.page{height: 100%;overflow: hidden;}
.page>*{width: 100%;}
.page .max{overflow: hidden auto;}

.head-outer{padding: 12px;width: 100%;}
.money_card{background-color: var(--color-primary);background-image: url("//taiyushangdao-saas.oss-cn-chengdu.aliyuncs.com/uploads/2024/1117/112255219507.png");background-size: 100%;}
.money_card{height: 176px;border-radius: 16px;padding: 16px;color: #fff;}
.money_card .money_value{padding-top: 56px;justify-content: space-between;}
.money_card .money_value .money{font-weight: bold;font-size: 32px;}
.money_card .money_value .van-button{padding: 0 20px;opacity: 0.9;}

.list-row-info{padding-bottom: 8px;}

.recharge>*{padding: 12px;}
.money-input{padding: 12px;background: var(--color-bg-0);}
.money-input>.title{color: var(--color-bg-re-r);}
.money-input>.money{font-size: 32px;align-items: flex-end;}
.money-input>.money>input{border: none;outline: none;background: none;font-weight: bold;font-size: 1.2em;line-height: 1;}
.money-input>.tips{color: var(--color-bg-re-r);padding-top: 5px;}
.select-money{flex-wrap: wrap;padding: 12px;}
.select-money>.item{width: 33.3%;padding: 10px 8px;font-size: 20px;}
.select-money>.item>.content{width: 100%;background: var(--color-bg-0);border-radius: 8px;text-align: center;padding: 8px 0;border: 1px solid transparent;}
.select-money>.item>.content.on{border-color: var(--color-primary);}
.recharge_tips{padding: 12px;background: var(--color-bg-0);}

</style>
<template>
  <div class="page flex" style="flex-direction: column;">
    <van-pull-refresh v-model="refresh_loading" @refresh="refresh">
      <div class="head-outer">
        <div class="money_card">
          <p class="title">{{ user_money_label }}</p>
          <p class="empty"></p>
          <div class="flex money_value">
            <p class="money">{{ money }}</p>
            <van-button v-show="show_body==='log'" text="充值" size="small" round plain type="primary" @click="show_body='recharge'" />
            <van-button v-show="show_body==='recharge'" text="查看记录" size="small" round plain type="primary" @click="show_body='log'" />
          </div>
        </div>
      </div>
    </van-pull-refresh>

    <div class="list-outer max">
      <van-tabs v-model:active="tab" class="list_order_tabs" v-show="show_body==='log'">
        <van-tab v-for="(tab_row,k) in tabs_map" :title="tab_row.label" :name="k">
          <van-list v-model:loading="tab_row.loading" :finished="tab_row.finished" @load="load" :ref="(el)=>{tab_row.$list=el}" finished-text="到底了">
            <van-collapse v-model="tab_row.open_ids">
              <van-collapse-item v-for="list_row in tab_row.list" :title="list_row.title" :name="list_row.id" :value="list_row.change"  >
                <div class="list-row-info">{{list_row.info}}</div>
                <div class="flex" style="justify-content: space-between;font-size: 0.85em">
                  <p>{{list_row.create_time}}</p>
                  <p>剩余：{{list_row.surplus}}</p>
                </div>
              </van-collapse-item>
            </van-collapse>
            <van-empty v-show="tab_row.list.length===0&&!tab_row.loading" :description="'暂无记录'" />
          </van-list>
        </van-tab>
      </van-tabs>

      <div class="recharge" v-show="show_body==='recharge'">
        <div class="money-input">
          <p class="title">充值金额(元)</p>
          <div class="flex money"><input class="max" type="number" v-model="pay_money"></div>
          <p class="tips">赠送 {{give_money}} 元</p>
        </div>
        <div class="select-money flex">
          <div class="item" v-for="row in recharge_price_list">
            <div class="content" :class="{on:row.on}" @click="pay_money=row.pay_money">
              <p class="money">{{ row.pay_money }}</p>
            </div>
          </div>
        </div>
        <div class="recharge_tips">
          <template v-for="row in recharge_price_list">
            <p v-if="row.give_money>0">充值满{{row.pay_money}} 赠送 {{row.give_money}}</p>
          </template>
        </div>
        <div>
          <van-button text="立即充值" block round type="primary" @click="recharge" />
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import s94 from "s94-js";
import {ajax, pay_handle} from "@/js/api_tool.js";
import {msg} from "@/js/vant_tool.js";
import {use_config_map} from "@/store/config_map.js";
import {use_this_user} from "@/store/this_user.js";

export default {
  data(){
    let recharge_price_list = [];
    try {
      let recharge_price = use_config_map().config.pay?.yue?.recharge_price || '[]';
      recharge_price = JSON.parse(recharge_price);
      if (recharge_price && typeof recharge_price === 'object' && Object.values(recharge_price).length>0){
        recharge_price_list = Object.values(recharge_price);
      }
    } catch (e) {}
    recharge_price_list.sort((a, b)=>{return a.pay_money-b.pay_money;})
    return {
      refresh_loading: false,
      show_body: 'log',
      user_money_label: use_config_map().config.pay?.yue?.user_money_label || '余额',
      money: use_this_user().money || 0,
      tabs_map: {
        all: {label: '全部', list: [], param:{}, loading: false, finished: false, page: 0, open_ids:[]},
        recharge: {label: '充值', list: [], param:{'where[link_table][eq]':'user_money_recharge'}, loading: false, finished: false, page: 0, open_ids:[]},
        order: {label: '订单', list: [], param:{'where[link_table][neq]':'user_money_recharge'}, loading: false, finished: false, page: 0, open_ids:[]},
      },
      tab: '',
      param: {},

      recharge_price_list: recharge_price_list,
      pay_money: 0,
      give_money: 0,
    }
  },
  methods:{
    refresh(){
      this.reset_list();
      ajax('/home/user/info', (res)=>{
        use_this_user().$patch(res.data);
        this.money = res.data.money;
        this.refresh_loading = false;
        return false;
      })
    },
    load(){
      let n = 20;
      let tab = s94.to_string(this.tab);
      let tab_row = this.tabs_map[tab];
      let param = s94.merge(this.param, tab_row.param)
      let url = '/home/user/user_money_list';
      let data = s94.merge(param, {p:tab_row.page, n:n});
      ajax({url:url, data:data, method:'POST'}, ({data})=>{
        tab_row.list = tab_row.list.concat(data.list);

        tab_row.finished = data.list.length < n;
        tab_row.page++;
        setTimeout(()=>{tab_row.loading = false;}, 20);
        return false;
      })
    },
    reset_list(is_all){
      let keys = is_all ? Object.keys(this.tabs_map) : [this.tab];
      keys.forEach(k=>{
        let tab_row = this.tabs_map[k];
        tab_row.list = [];
        tab_row.page = 0;
        tab_row.finished = false;
        tab_row.loading = false;

        if (tab_row.$list) tab_row.$list.check();
      })
    },
    recharge(){
      if (this.pay_money <= 0) return msg.fail('充值金额必须大于0');
      let url = `/home/user_money_recharge/continuous_action?action_queue=add,pay`;
      let data = {pay_money: this.pay_money};
      pay_handle({url:url, ban_type:['yue']}, data, ()=>{
        msg('支付成功，稍后下拉刷新查看余额变化');
        return false;
      })
    }
  },
  computed:{},
  watch:{
    pay_money(){
      this.give_money = 0;
      let on_i = -1;
      this.recharge_price_list.forEach((row,i)=>{
        row.on = false;
        if (parseFloat(this.pay_money) >= parseFloat(row.pay_money)) on_i = i;
      })
      if (on_i>=0) {
        this.recharge_price_list[on_i].on = true;
        this.give_money = this.recharge_price_list[on_i].give_money;
      }
    },
    show_body(v){
      if (v==='log') {
        let tab_row = this.tabs_map[this.tab] || {};
        if (tab_row.$list) tab_row.$list.check();
      }
    }
  },
  mounted(){
    setTimeout(()=>{this.tab = 'all'}, 5);



  }
}
</script>